<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container" :style="{'min-height': containerHeight + 'px'}">
            <div class="handle-box flex flex-center">
                <el-button type="primary" icon="el-icon-folder" @click="submitForm('ruleForm')">保存</el-button>
            </div>

            <div class="table-form-box">
                <h3 class="h3">客户信息</h3>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                    <table border="0" width="100%" cellpadding="0" cellspacing="1">
                        <colgroup>
                            <col width="15%" />
                            <col width="35%" />
                            <col width="15%" />
                            <col width="35%" />
                        </colgroup>
                        <tbody>
                            <tr class="tr-title">
                                <td colspan="4">基本信息</td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <span class="color-ff2200">*</span>客户名称
                                </td>
                                <td>
                                    <el-form-item prop="name">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="ruleForm.name"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">客户简称:</td>
                                <td>
                                    <el-form-item prop="abbreviation">
                                        <el-input
                                            placeholder="请输入"
                                            v-model="ruleForm.abbreviation"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <span class="color-ff2200">*</span>客户类型:
                                </td>
                                <td>
                                    <el-form-item prop="clientTypeValue">
                                        <el-select
                                            v-model="ruleForm.clientTypeName"
                                            placeholder="请选择"
                                            @change="handleValue($event,'客户类型')"
                                        >
                                            <el-option
                                                v-for="(item, index) in clientTypeList"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>所属行业:
                                </td>
                                <td>
                                    <el-form-item prop="industryName">
                                        <el-select
                                            v-model="ruleForm.industryName"
                                            placeholder="请选择"
                                            @change="handleValue($event,'所属行业')"
                                        >
                                            <el-option
                                                v-for="(item, index) in industryList"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <span class="color-ff2200">*</span>所属区域:
                                </td>
                                <td>
                                    <el-form-item prop="regionName">
                                        <el-select
                                            v-model="ruleForm.regionName"
                                            placeholder="请选择"
                                            @change="handleValue($event,'所属区域')"
                                        >
                                            <el-option
                                                v-for="(item, index) in regionInfoList"
                                                :key="index"
                                                :label="item.name"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>公司规模:
                                </td>
                                <td>
                                    <el-form-item prop="scaleId">
                                        <el-select
                                            v-model="ruleForm.scaleId"
                                            placeholder="请选择"
                                            @change="handleValue($event,'公司规模')"
                                        >
                                            <el-option
                                                v-for="(item, index) in scaleList"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <span class="color-ff2200">*</span>客户来源:
                                </td>
                                <td>
                                    <el-form-item prop="sourceId">
                                        <el-select
                                            v-model="ruleForm.sourceId"
                                            placeholder="请选择"
                                            @change="handleValue($event,'客户来源')"
                                        >
                                            <el-option
                                                v-for="(item, index) in sourceList"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                    <span class="color-ff2200">*</span>客户等级:
                                </td>
                                <td>
                                    <el-form-item prop="levelId">
                                        <el-select
                                            v-model="ruleForm.levelId"
                                            placeholder="请选择"
                                            @change="handleValue($event,'客户等级')"
                                        >
                                            <el-option
                                                v-for="(item, index) in levelList"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">人员规模:</td>
                                <td>
                                    <el-form-item prop="personTotal">
                                        <el-input
                                            v-model="ruleForm.personTotal"
                                            type="number"
                                            min="1"
                                            max="9999"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">成立时间:</td>
                                <td>
                                    <el-form-item prop="establishedTime">
                                        <el-date-picker
                                            style="width:99%"
                                            v-model="ruleForm.establishedTime"
                                            align="right"
                                            type="date"
                                            :picker-options="pickerOptions"
                                            placeholder="选择日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">客户简介:</td>
                                <td>
                                    <el-form-item prop="contactsDescription">
                                        <el-input
                                            v-model="ruleForm.contactsDescription"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">负责人:</td>
                                <td>
                                    <el-form-item prop="repid">
                                        <el-input
                                            placeholder="请点击左边搜索图标选择"
                                            v-model="ruleForm.repName"
                                            size="small"
                                            readonly
                                            clearable
                                        >
                                            <i
                                                slot="prefix"
                                                class="el-icon-search"
                                                @click="showTreeDialog('负责人')"
                                            ></i>
                                            <i
                                                slot="suffix"
                                                class="el-icon-delete"
                                                @click="deleteRepName()"
                                            ></i>
                                        </el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">备注:</td>
                                <td>
                                    <el-form-item prop="remarks">
                                        <el-input v-model="ruleForm.remarks" type="textarea"></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">负责部门:</td>
                                <td>
                                    <el-form-item prop="repDeptName">
                                        <el-input v-model="ruleForm.repDeptName" readonly></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <table border="0" width="100%" cellpadding="0" cellspacing="1" class="mt20">
                        <colgroup>
                            <col width="15%" />
                            <col width="35%" />
                            <col width="15%" />
                            <col width="35%" />
                        </colgroup>
                        <tbody>
                            <tr class="tr-title">
                                <td colspan="8">通讯信息</td>
                            </tr>
                            <tr>
                                <td align="right">电话</td>
                                <td>
                                    <el-form-item prop="telphone">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="ruleForm.telphone"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">手机:</td>
                                <td>
                                    <el-form-item prop="phone">
                                        <el-input
                                            placeholder="请输入"
                                            v-model="ruleForm.phone"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">QQ:</td>
                                <td>
                                    <el-form-item prop="qq">
                                        <el-input
                                            placeholder="请输入"
                                            v-model="ruleForm.qq"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">传真:</td>
                                <td>
                                    <el-form-item prop="fax">
                                        <el-input
                                            placeholder="请输入"
                                            v-model="ruleForm.fax"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">email</td>
                                <td>
                                    <el-form-item prop="email">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="ruleForm.email"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">主页:</td>
                                <td>
                                    <el-form-item prop="homePageUrl">
                                        <el-input
                                            placeholder="请输入"
                                            v-model="ruleForm.homePageUrl"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">省:</td>
                                <td>
                                    <el-form-item prop="provinceName">
                                        <el-select
                                            v-model="ruleForm.provinceName"
                                            placeholder="请选择"
                                            @change="handleValue($event,'省')"
                                        >
                                            <el-option
                                                v-for="(item, index) in provinceList"
                                                :key="index"
                                                :label="item.provinceName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">市:</td>
                                <td>
                                    <el-form-item prop="cityName">
                                        <el-select
                                            v-model="ruleForm.cityName"
                                            placeholder="请选择"
                                            @change="handleValue($event,'市')"
                                        >
                                            <el-option
                                                v-for="(item, index) in cityList"
                                                :key="index"
                                                :label="item.cityName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">区:</td>
                                <td>
                                    <el-form-item prop="areaName">
                                        <el-select
                                            v-model="ruleForm.areaName"
                                            placeholder="请选择"
                                            @change="handleValue($event,'区')"
                                        >
                                            <el-option
                                                v-for="(item, index) in areaList"
                                                :key="index"
                                                :label="item.areaName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">邮编:</td>
                                <td>
                                    <el-form-item prop="postNo">
                                        <el-input
                                            placeholder="请输入"
                                            v-model="ruleForm.postNo"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">联系人:</td>
                                <td>
                                    <el-form-item prop="contactUser">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="ruleForm.contactUser"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">地址:</td>
                                <td>
                                    <el-form-item prop="address">
                                        <el-input
                                            placeholder="请输入"
                                            v-model="ruleForm.address"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <table border="0" width="100%" cellpadding="0" cellspacing="1" class="mt20">
                        <colgroup>
                            <col width="15%" />
                            <col width="35%" />
                            <col width="15%" />
                            <col width="35%" />
                        </colgroup>
                        <tbody>
                            <tr class="tr-title">
                                <td colspan="8">注册信息</td>
                            </tr>
                            <tr>
                                <td align="right">法人代表:</td>
                                <td>
                                    <el-form-item prop="registerLegalPerson">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="ruleForm.registerLegalPerson"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">注册资本:</td>
                                <td>
                                    <el-form-item prop="registerMoney">
                                        <el-input
                                            placeholder="请输入"
                                            v-model="ruleForm.registerMoney"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">注册地址:</td>
                                <td>
                                    <el-form-item prop="registerAddress">
                                        <el-input
                                            placeholder="请输入"
                                            v-model="ruleForm.registerAddress"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">资产规模:</td>
                                <td>
                                    <el-form-item prop="assetSize">
                                        <el-input
                                            placeholder="请输入"
                                            v-model="ruleForm.assetSize"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">税务登记号:</td>
                                <td>
                                    <el-form-item prop="registerTaxNumber">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="ruleForm.registerTaxNumber"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">一般纳税人:</td>
                                <td>
                                    <el-form-item prop="isGeneral">
                                        <el-checkbox v-model="ruleForm.isGeneral"></el-checkbox>
                                    </el-form-item>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <table border="0" width="100%" cellpadding="0" cellspacing="1" class="mt20">
                        <colgroup>
                            <col width="15%" />
                            <col width="35%" />
                            <col width="15%" />
                            <col width="35%" />
                        </colgroup>
                        <tbody>
                            <tr class="tr-title">
                                <td colspan="8">备注信息</td>
                            </tr>
                            <tr>
                                <td align="right">开户银行:</td>
                                <td>
                                    <el-form-item prop="bankName">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="ruleForm.bankName"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right">开户名:</td>
                                <td>
                                    <el-form-item prop="bankAccount">
                                        <el-input
                                            placeholder="请输入"
                                            v-model="ruleForm.bankAccount"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">银行账号:</td>
                                <td colspan="3">
                                    <el-form-item prop="bankCardNo">
                                        <el-input
                                            placeholder="请输入"
                                            v-model="ruleForm.bankCardNo"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">发票类型:</td>
                                <td>
                                    <el-form-item prop="invoiceTypeName">
                                        <el-select
                                            v-model="ruleForm.invoiceTypeName"
                                            placeholder="请选择"
                                            @change="handleValue($event,'发票类型')"
                                        >
                                            <el-option
                                                v-for="(item, index) in invoiceTypeList"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">结算方式:</td>
                                <td>
                                    <el-form-item prop="settlementTypeName">
                                        <el-select
                                            v-model="ruleForm.settlementTypeName"
                                            placeholder="请选择"
                                            @change="handleValue($event,'结算方式')"
                                        >
                                            <el-option
                                                v-for="(item, index) in settlementTypeList"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">结算币种:</td>
                                <td>
                                    <el-form-item prop="settlementCurrencyId">
                                        <el-select
                                            v-model="ruleForm.settlementCurrencyId"
                                            placeholder="请选择"
                                            @change="handleValue($event,'结算币种')"
                                        >
                                            <el-option
                                                v-for="(item, index) in settlementCurrencyList"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">结算余额:</td>
                                <td>
                                    <el-form-item prop="settlementBalance">
                                        <el-input
                                            placeholder="请输入"
                                            v-model="ruleForm.settlementBalance"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">结算备注:</td>
                                <td colspan="3">
                                    <el-form-item prop="settlementRemarks">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="ruleForm.settlementRemarks"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <table border="0" width="100%" cellpadding="0" cellspacing="1" class="mt20">
                        <colgroup>
                            <col width="15%" />
                            <col width="85%" />
                        </colgroup>
                        <tbody>
                            <tr class="tr-title">
                                <td colspan="2">自定义属性</td>
                            </tr>
                            <tr v-for="(item, index) in customField" :key="index">
                                <td align="right">{{item.fieldName}}:</td>
                                <td>
                                    <el-form-item prop="id">
                                        <el-input
                                            placeholder="请输入内容"
                                            v-model="item.value"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </el-form>
            </div>
        </div>
        <!-- 用户树搜索 -->
        <tree-search
            :isShow="showSearch"
            :dialogTitle="searchDialogTit"
            @edit="searchBack"
            @close="closeTreeDialog"
        ></tree-search>
    </div>
</template>

<script>
import appMain from '../../../utils/app_main';
import bus from '../../../components/common/bus';
var _ = require('lodash');
export default {
    data() {
        return {
            pageTitle: '',
            containerHeight: '',
            searchDialogTit: '',
            showSearch: false,
            pickerOptions: {
                disabledDate(time) {
                    // 意思是如果小于当前时间则不能选择
                    return time.getTime() > Date.now();
                }
            },
            ruleForm: {
                abbreviation: '', // 往来单位简称
                address: '', // 地址信息
                areaId: '', // 区id
                areaName: '', //  区名
                assetSize: '', // 资产规模
                bankAccount: '', // 开户人
                bankCardNo: '', // 银行账号
                bankName: '', // 开户银行
                cityId: '', // 市id
                cityName: '', // 市名
                clientTypeId: '', // 客户类型id
                clientTypeName: '', // 客户类型民营企业私营企业
                clientTypeValue: '', // 客户类型值
                contactUser: '', // 联系人
                contactsDescription: '', // 往来单位介绍
                contactsTypeId: '', // 所属往来类别id
                contactsTypeName: '', // 所属往来类别名字
                customFieldValueDTOS: [], // 客户自定义字段列表,接口获取

                dutyDepartId: '', // 部门id
                dutyDepartName: '', // 部门名
                email: '', // 邮箱地址
                establishedTime: '', // 成立时间
                fax: '', // 传真
                homePageUrl: '', // 公司主页地址
                industryId: '', // 行业id
                industryName: '', // 行业名称
                industryValue: '', // 行业值
                invoiceBalance: '', // 发票结余
                invoiceTypeId: '', // 发票类型id
                invoiceTypeName: '', // 发票类型名称
                invoiceTypeValue: '', // 发票类型值
                isGeneral: false, // 是否为一般纳税人0是 1不是
                levelId: '', // 客户等级id
                levelName: '', // 客户等级名
                levelValue: '', // 客户等级值
                name: '', // 往来单位名称
                personTotal: '', // 人员规模(数量)
                phone: '', // 电话
                postNo: '', //  邮政编码
                provinceId: '', // 省id
                provinceName: '', // 省名

                qq: '', // qq号码
                regionId: '', // 区域id
                regionName: '', // 区域名称
                registerAddress: '', // 注册地址
                registerLegalPerson: '', // 法人
                registerMoney: '', // 注册资金
                registerTaxNumber: '', // 税务登记号
                remarks: '', // 备注信息
                repDeptId: '', // 责任部门id
                repDeptName: '', // 责任部门名
                repId: '', // 责任人id
                repName: '', // 责任人
                scaleId: '', // 规模id
                scaleName: '', // 规模名
                scaleValue: '', // 规模值
                settlementBalance: '', // 结算余额
                settlementCurrencyId: '', // 结算币种id
                settlementCurrencyName: '', // 结算币种name
                settlementCurrencyValue: '', // 结算币种value
                settlementRemarks: '', // 结算备注相关
                settlementTypeId: '', // 结算方式id
                settlementTypeName: '', // 结算方式name
                settlementTypeValue: '', // 结算方式value

                sourceId: '', // 客户来源id
                sourceName: '', // 客户来源名
                sourceValue: '', // 客户来源值
                taxRate: '', // 税率
                telphone: '', // 固定电话
                // uploadReturns:[], // 附件列表
                vatNumber: '' // 增值税号
            },
            rules: {
                name: [{ required: true, message: '请输入客户', trigger: 'change' }],
                clientTypeValue: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
                industryName: [{ required: true, message: '请选择所属行业', trigger: 'change' }],
                regionName: [{ required: true, message: '请选择所属区域', trigger: 'change' }],

                scaleId: [{ required: true, message: '请选择公司规模', trigger: 'change' }],
                sourceId: [{ required: true, message: '请选择客户来源', trigger: 'change' }],
                levelId: [{ required: true, message: '请选择客户等级', trigger: 'change' }],
                settlementBalance: [
                    {
                        message: '请输入正确的余额',
                        type: 'number',
                        transform(value) {
                            return _.toNumber(value);
                        },
                        trigger: 'blur'
                    }
                ],
                phone: [
                    {
                        required: false,
                        pattern: /^1[3456789]\d{9}$/,
                        message: '请输入正确的手机号码',
                        trigger: 'change'
                    }
                ],
                telphone: [
                    {
                        required: false,
                        pattern: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/,
                        message: '请输入正确的电话',
                        trigger: 'change'
                    }
                ],
                qq: [
                    {
                        required: false,
                        pattern: /^[1-9]{1}[0-9]{4,11}$/,
                        message: '请输入正确的qq号',
                        trigger: 'change'
                    }
                ],
                fax: [
                    {
                        required: false,
                        pattern: /^(\d{3,4}-)?\d{7,8}$/,
                        message: '请输入正确的传真号',
                        trigger: 'change'
                    }
                ],
                email: [
                    {
                        required: false,
                        pattern: /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/,
                        message: '请输入正确的邮箱',
                        trigger: 'change'
                    }
                ],
                homePageUrl: [
                    {
                        required: false,
                        pattern: /^((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)$/,
                        message: '请输入正确的主页路径',
                        trigger: 'change'
                    }
                ],
                postNo: [
                    {
                        required: false,
                        pattern: /^\d{6}$/,
                        message: '请输入正确的邮编',
                        trigger: 'change'
                    }
                ],
                contactUser: [
                    {
                        required: false,
                        pattern: /^[\u4E00-\u9FA5A-Za-z\s]+(·[\u4E00-\u9FA5A-Za-z]+)*$/,
                        message: '请输入正确的联系人',
                        trigger: 'change'
                    }
                ],
                address: [
                    {
                        required: false,
                        pattern: /^[\u4E00-\u9FA5A-Za-z\s]+(·[\u4E00-\u9FA5A-Za-z]+)*$/,
                        message: '请输入正确的地址',
                        trigger: 'change'
                    }
                ]
            },
            fileList: [],
            isUpdate: false, // 是否是更新
            flag: false,

            customField: [], // 自定义客户字段

            // 各种下拉列表
            clientTypeList: [], // 客户类型
            industryList: [], // 所属行业
            scaleList: [], // 公司规模
            sourceList: [], // 客户来源
            levelList: [], // 客户登记
            invoiceTypeList: [], // 发票类型
            settlementTypeList: [], // 结算方式
            settlementCurrencyList: [], // 结算币种

            departList: [], // 负责部门
            regionInfoList: [], // 区域列表

            provinceList: [], // 省
            cityList: [], // 市
            areaList: [] // 区域
        };
    },
    methods: {
        // 选择姓名
        showTreeDialog(tit) {
            this.searchDialogTit = tit;
            this.showSearch = true;
        },
        // 树组件搜索结果返回
        searchBack(data) {
            console.log(data.backData, 'searchTreeBack');
            this.ruleForm.repName = data.backData.name;
            this.ruleForm.repId = data.backData.id;
            this.ruleForm.jobRole = data.backData.jobName;
            this.ruleForm.jobRoleId = data.backData.jobId;
            this.ruleForm.repDeptName = data.backData.organizationName;
            this.ruleForm.repDeptId = data.backData.organizationId;
            this.showSearch = false;
        },
        deleteRepName() {
            this.ruleForm.repName = '';
            this.ruleForm.repId = '';
            this.ruleForm.jobRole = '';
            this.ruleForm.jobRoleId = '';
            this.ruleForm.repDeptName = '';
            this.ruleForm.repDeptId = '';
        },
        closeTreeDialog(data) {
            this.showSearch = data.showDialog;
        },
        //新增
        clientInfoInsert() {
            let sendData = _.cloneDeep(this.ruleForm);
            sendData.isGeneral = sendData.isGeneral ? 1 : 0;
            sendData.settlementBalance = sendData.settlementBalance != '' ? sendData.settlementBalance : 0;
            let arr = [];
            this.customField.map(item => {
                let obj = {};
                obj.customFieldId = item.id;
                obj.customFieldValue = item.value;
                arr.push(obj);
            });
            sendData.customFieldValueDTOS = arr;
            appMain
                .clientInfoInsert(sendData)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.$router.push({
                            //核心语句
                            path: '/customerInfoList' //跳转的路径
                        });
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        clientInfoUpdateById() {
            let sendData = _.cloneDeep(this.ruleForm);
            sendData.isGeneral = sendData.isGeneral ? 1 : 0;
            sendData.settlementBalance = sendData.settlementBalance != '' ? sendData.settlementBalance : 0;
            let arr = [];
            this.customField.map(item => {
                let obj = {};
                obj.customFieldId = item.customFieldId;
                obj.customFieldValue = item.value;
                arr.push(obj);
            });
            sendData.customFieldValueDTOS = arr;
            appMain
                .clientInfoUpdateById(sendData)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.$router.push({
                            //核心语句
                            path: '/customerInfoList' //跳转的路径
                        });
                        //this.resetForm('ruleForm');
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        clientInfoFindById(id) {
            appMain
                .clientInfoFindById({}, id)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.ruleForm = res.data.data;
                        // 客户自定义属性
                        let customField = [];
                        this.ruleForm.customFieldValueDTOS.map(item => {
                            let obj;
                            obj = _.cloneDeep(item);
                            obj.value = item.customFieldValue;
                            customField.push(obj);
                        });
                        this.customField = customField;
                    } else {
                        this.$message.error('服务器繁忙，请稍后再试');
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.ruleForm.uploadReturns = this.fileList;
                    //alert('submit!');
                    if (!this.isUpdate) {
                        //添加文件列表
                        //新增
                        this.clientInfoInsert();
                    } else {
                        //添加文件列表
                        //更新
                        this.clientInfoUpdateById();
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //获取部门搜索元素
        getDepart() {
            appMain
                .organizationUserList()
                .then(res => {
                    if (res.data.code === 20000) {
                        this.departList = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //部门下拉框取值
        handleValue(val) {
            for (const key in this.departList) {
                if (this.departList[key].id == val) {
                    this.ruleForm.dutyDepartId = val;
                    this.ruleForm.dutyDepartName = this.departList[key].name;
                }
            }
        },
        /**
         * 下拉框数据start
         */
        dictItemForPerfection() {
            let dictTypes = ['客户类型', '行业', '公司规模', '客户来源', '客户等级', '发票类型', '结算方式', '结算币种'];
            dictTypes.map(item => {
                appMain.dictItem({ typeName: item }).then(res => {
                    if (res.data.code === 20000) {
                        if (item == '客户类型') {
                            this.clientTypeList = res.data.data;
                        } else if (item == '行业') {
                            this.industryList = res.data.data;
                        } else if (item == '公司规模') {
                            this.scaleList = res.data.data;
                        } else if (item == '客户来源') {
                            this.sourceList = res.data.data;
                        } else if (item == '客户等级') {
                            this.levelList = res.data.data;
                        } else if (item == '发票类型') {
                            this.invoiceTypeList = res.data.data;
                        } else if (item == '结算方式') {
                            this.settlementTypeList = res.data.data;
                        } else if (item == '结算币种') {
                            this.settlementCurrencyList = res.data.data;
                        }
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            });
        },
        //下拉框选取值
        handleValue(e, dict) {
            console.log(e, dict, '下拉框选取值');
            if (dict == '客户类型') {
                let item = this.selectChooseItem(this.clientTypeList, e);
                this.ruleForm.clientTypeId = item.id;
                this.ruleForm.clientTypeName = item.itemName;
                this.ruleForm.clientTypeValue = item.itemValue;
            } else if (dict == '所属行业') {
                let item = this.selectChooseItem(this.industryList, e);
                this.ruleForm.industryId = item.id;
                this.ruleForm.industryName = item.itemName;
                this.ruleForm.industryValue = item.itemValue;
            } else if (dict == '公司规模') {
                let item = this.selectChooseItem(this.scaleList, e);
                this.ruleForm.scaleId = item.id;
                this.ruleForm.scaleName = item.itemName;
                this.ruleForm.scaleValue = item.itemValue;
            } else if (dict == '客户来源') {
                let item = this.selectChooseItem(this.sourceList, e);
                this.ruleForm.sourceId = item.id;
                this.ruleForm.sourceName = item.itemName;
                this.ruleForm.sourceValue = item.itemValue;
            } else if (dict == '客户等级') {
                let item = this.selectChooseItem(this.levelList, e);
                this.ruleForm.levelId = item.id;
                this.ruleForm.levelName = item.itemName;
                this.ruleForm.levelValue = item.itemValue;
            } else if (dict == '发票类型') {
                let item = this.selectChooseItem(this.invoiceTypeList, e);
                this.ruleForm.invoiceTypeId = item.id;
                this.ruleForm.invoiceTypeName = item.itemName;
                this.ruleForm.invoiceTypeValue = item.itemValue;
            } else if (dict == '结算方式') {
                let item = this.selectChooseItem(this.settlementTypeList, e);
                this.ruleForm.settlementTypeId = item.id;
                this.ruleForm.settlementTypeName = item.itemName;
                this.ruleForm.settlementTypeValue = item.itemValue;
            } else if (dict == '结算币种') {
                let item = this.selectChooseItem(this.settlementCurrencyList, e);
                this.ruleForm.settlementCurrencyId = item.id;
                this.ruleForm.settlementCurrencyName = item.itemName;
                this.ruleForm.settlementCurrencyValue = item.itemValue;
            } else if (dict == '所属区域') {
                let item = this.selectChooseItem(this.regionInfoList, e);
                this.ruleForm.regionId = item.id;
                this.ruleForm.regionName = item.name;
            } else if (dict == '省') {
                let item = {};
                this.provinceList.map((it, index) => {
                    if (it.id == e) {
                        item = it;
                    }
                });
                console.log(item, 'item');
                if (item.id == this.ruleForm.provinceId) {
                } else {
                    this.ruleForm.provinceId = item.id;
                    this.ruleForm.provinceName = item.provinceName;
                    this.ruleForm.cityId = '';
                    this.ruleForm.cityName = '';
                    this.ruleForm.areaId = '';
                    this.ruleForm.areaName = '';
                    this.cityFindList(item.id);
                }
            } else if (dict == '市') {
                let item = this.selectArrayItem(this.cityList, e);
                if (item.id == this.ruleForm.cityId) {
                } else {
                    this.ruleForm.cityId = item.id;
                    this.ruleForm.cityName = item.cityName;
                    this.ruleForm.areaId = '';
                    this.ruleForm.areaName = '';
                    this.areaFindList(item.id);
                }
            } else if (dict == '区') {
                let item = this.selectArrayItem(this.areaList, e);
                if (item.id == this.ruleForm.areaId) {
                } else {
                    this.ruleForm.areaId = item.id;
                    this.ruleForm.areaName = item.areaName;
                }
            }
        },
        // 通用字典选择
        selectChooseItem(item, id) {
            for (const key in item) {
                if (item[key].id == id) {
                    return item[key];
                }
            }
        },
        // 通用数组选择
        selectArrayItem(item, id) {
            let obj = {};
            item.map((it, index) => {
                if (it.id == id) {
                    obj = it;
                }
            });
            return obj;
        },
        // 省份列表获取
        provinceFindAll() {
            appMain.provinceFindAll({}).then(res => {
                if (res.data.code === 20000) {
                    this.provinceList = res.data.data;
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },
        // 城市获取
        cityFindList(provinceId) {
            let sendData = {
                provinceId: provinceId
            };
            appMain.cityFindList(sendData).then(res => {
                if (res.data.code === 20000) {
                    this.cityList = res.data.data;
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },
        // 区县获取
        areaFindList(cityId) {
            let sendData = {
                cityId: cityId
            };
            appMain.areaFindList(sendData).then(res => {
                if (res.data.code === 20000) {
                    this.areaList = res.data.data;
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },

        /**
         * 下拉框数据 end
         */
        // 查询自定义字段
        findAllPage() {
            this.loading = true;
            let sendData = {};
            appMain
                .customFieldGetAllField(sendData)
                .then(res => {
                    this.loading = false;
                    if (res.data.code === 20000) {
                        //TODO 测试环境使用
                        let fields = res.data.data;
                        fields.map(item => {
                            fields.value = '';
                        });
                        this.customField = fields;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                    this.timer = setTimeout(() => {
                        //设置延迟执行
                        this.loading = false;
                    }, 1000);
                });
        },
        // 获取区域列表
        regionInfoFindAllPageByName() {
            let sendData = {
                pageNo: 1,
                pageSize: 100,
                record: ''
            };
            appMain
                .regionInfoFindAllPageByName(sendData)
                .then(res => {
                    if (res.data.code === 20000) {
                        //TODO 测试环境使用
                        this.regionInfoList = res.data.data.list;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        }
        //
    },
    mounted() {
        var div_height = window.screen.availHeight;
        var height = div_height - 100;
        this.containerHeight = height - 160;
        this.pageTitle = this.$router.currentRoute.meta.title;
        this.dictItemForPerfection(); // 获取字典数据
        this.regionInfoFindAllPageByName();
        this.provinceFindAll();
    },
    created() {
        //如果有id过来就是修改的
        if (this.$route.query.id) {
            let id = this.$route.query.id;
            //是更新操作
            this.isUpdate = true;
            //通过id查询对应离职信息
            this.clientInfoFindById(id);
        } else {
            //新增操作
            this.ruleForm = {
                abbreviation: '', // 往来单位简称
                address: '', // 地址信息
                areaId: '', // 区id
                areaName: '', //  区名
                assetSize: '', // 资产规模
                bankAccount: '', // 开户人
                bankCardNo: '', // 银行账号
                bankName: '', // 开户银行
                cityId: '', // 市id
                cityName: '', // 市名
                clientTypeId: '', // 客户类型id
                clientTypeName: '', // 客户类型民营企业私营企业
                clientTypeValue: '', // 客户类型值
                contactUser: '', // 联系人
                contactsDescription: '', // 往来单位介绍
                contactsTypeId: '', // 所属往来类别id
                contactsTypeName: '', // 所属往来类别名字
                customFieldValueDTOS: [], // 客户自定义字段列表,接口获取

                dutyDepartId: '', // 部门id
                dutyDepartName: '', // 部门名
                email: '', // 邮箱地址
                establishedTime: '', // 成立时间
                fax: '', // 传真
                homePageUrl: '', // 公司主页地址
                industryId: '', // 行业id
                industryName: '', // 行业名称
                industryValue: '', // 行业值
                invoiceBalance: '', // 发票结余
                invoiceTypeId: '', // 发票类型id
                invoiceTypeName: '', // 发票类型名称
                invoiceTypeValue: '', // 发票类型值
                isGeneral: false, // 是否为一般纳税人0是 1不是
                levelId: '', // 客户等级id
                levelName: '', // 客户等级名
                levelValue: '', // 客户等级值
                name: '', // 往来单位名称
                personTotal: '', // 人员规模(数量)
                phone: '', // 电话
                postNo: '', //  邮政编码
                provinceId: '', // 省id
                provinceName: '', // 省名

                qq: '', // qq号码
                regionId: '', // 区域id
                regionName: '', // 区域名称
                registerAddress: '', // 注册地址
                registerLegalPerson: '', // 法人
                registerMoney: '', // 注册资金
                registerTaxNumber: '', // 税务登记号
                remarks: '', // 备注信息
                repDeptId: '', // 责任部门id
                repDeptName: '', // 责任部门名
                repId: '', // 责任人id
                repName: '', // 责任人
                scaleId: '', // 规模id
                scaleName: '', // 规模名
                scaleValue: '', // 规模值
                settlementBalance: '', // 结算余额
                settlementCurrencyId: '', // 结算币种id
                settlementCurrencyName: '', // 结算币种name
                settlementCurrencyValue: '', // 结算币种value
                settlementRemarks: '', // 结算备注相关
                settlementTypeId: '', // 结算方式id
                settlementTypeName: '', // 结算方式name
                settlementTypeValue: '', // 结算方式value

                sourceId: '', // 客户来源id
                sourceName: '', // 客户来源名
                sourceValue: '', // 客户来源值
                taxRate: '', // 税率
                telphone: '', // 固定电话
                // uploadReturns:[], // 附件列表
                vatNumber: '' // 增值税号
            };
            this.isUpdate = false;
            this.flag = true;
            this.findAllPage();
        }
    },
    watch: {
        $route() {
            if (this.$route.query.id) {
                let id = this.$route.query.id;
                //是更新操作
                this.isUpdate = true;
                //通过id查询对应离职信息
                this.clientInfoFindById(id);
            } else {
                this.resetForm('ruleForm');
                this.isUpdate = false;
                this.flag = true;
                this.findAllPage();
            }
        }
    }
};
</script>

<style  scoped>
.container {
    padding-bottom: 50px;
}
.handle-box {
    padding: 5px 50px;
    width: 100%;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    z-index: 1;
}
.table-form-box {
    padding-bottom: 100px;
}
.table-form-box table {
    background-color: #666;
}
.table-form-box .h3 {
    font-size: 22px;
    text-align: center;
    font-weight: normal;
    padding: 20px 0;
}
.table-form-box table .tr-title td {
    font-size: 14px;
    line-height: 40px;
}
.table-form-box table td,
.table-form-box table th {
    background-color: #fff;
    padding: 4px;
    min-height: 40px;
    font-size: 12px;
}
.color-ff2200 {
    color: #ff2200;
}
</style>